$(function () {
    //设置一个全局对象，将来会用
    let q = {
        pagenum: 1, //
        pagesize: 2,	//是	int	每页显示多少条数据
        cate_id: '',  //否	string	文章分类的 Id
        state: '',   //否	string	文章的状态，可选值有：已发布、草稿
    }
    initArticleList()
    function initArticleList() {

        //发送ajax
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(({ data: res }) => {
            // console.log(res);
            //渲染
            let arr = []
            res.data.forEach(ele => {
                arr.push(`
                <tr>
                <td>
                <a href="javascript:;">${ele.title}</a>
            </td>
            <td>${ele.cate_name}</td>
            <td>${formatDate(ele.pub_date)}</td>
            <td>${ele.state}</td>
            <td>
                <a href="/article/art_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">修改</a>
                <button data-id="${ele.Id}" class="  del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
                </tr>
                `);

            })
            //循环结束 ，赋值
            $('tbody').empty().html(arr.join(''))
            // 分页调用
            renderPage(res.total)
        })
    }
    // 渲染筛选的文章类别列表
    let form = layui.form
    let layer = layui.layer
    initArtCateList()
    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(({ data: res }) => {
            // console.log(res);
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            //成功渲染
            let arr = ['<option value="">请选择文章所属分类</option>']
            res.data.forEach(ele => {
                arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                `)
            })
            //循环结束赋值
            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            //form.render()；可以渲染layui中的，select/checkbox/radio
            form.render()

        })

    }

    //需求3.筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        //care_id和 state的值修改，根据form表单里面的值修改
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        //重新渲染 文章列表
        initArticleList()
    })

    //需求4.分页
    function renderPage(total) {
        let laypage = layui.laypage
        laypage.render({
            elem: 'pageBox' //注意，这里的 test1 是 ID，不用加 # 号
            , count: total,//数据总数，从服务端得到
            limit: q.pagesize,  //每页显示多少条
            curr: q.pagenum,   // 第几页
            //显示区域
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数
                // console.log(obj.curr);
                console.log(1);
                if (!first) {
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }
        });
    }
    $('tbody').on('click', '.del-btn', function () {
        console.log(111);
        let id = $(this).attr('data-id')
        layer.confirm('是否确定删除？', { icon: 3, title: '提示' }, function (index) {
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id
            }).then(({ data: res }) => {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg('恭喜您，删除文章成功')
                //如果页面中的最后一条被删除了，那么我们应该查询上一页(q.pagenum)
                $('.del-btn').length == 1 && q.pagenum >= 2 && q.pagenum
                initArticleList()

            })
            layer.close(index)
        })
    })



})

